<template>
    <div class="FirstPage">
        <div class="main_part main_part_1">
            <div class="part_nav part_nav_1">
                <h2 class="title"><i class="iconfont icon-shengchanguanli"></i> 订单数量</h2>
                <div class="contain">
                    <div class="tableList">
                        <li class="th">
                            <span></span>
                            <span>U型</span>
                            <span>单支联排</span>
                            <span>多支</span>
                            <span>伸缩</span>
                        </li>			
                        <li class="td td1">
                            <span class="bg">今日</span>
                            <span v-for="(item,index) in orderCountDetail.day">{{item}}</span>
                        </li>
                        <li class="td td2">
                            <span class="bg">本月</span>
							<span v-for="(item,index) in orderCountDetail.moth">{{item}}</span>
                        </li>
                        <li class="td td3">
                            <span class="bg">本年</span>
							<span v-for="(item,index) in orderCountDetail.year">{{item}}</span>
                        </li>
                    </div>
                </div>
            </div>
            <div class="part_nav part_nav_2">
                <h2 class="title"><i class="iconfont icon-jihua1"></i> 机台动态</h2>
                <div class="contain">
                    <li><p class="_left">U直</p><p class="_right">{{onDutyProductDetail.jsU}}</p></li>
                    <li><p class="_left">U型</p><p class="_right">{{onDutyProductDetail.U}}</p></li>
                    <li><p class="_left">伸直</p><p class="_right">{{onDutyProductDetail.jsS}}</p></li>
                    <li><p class="_left">伸缩</p><p class="_right">{{onDutyProductDetail.scale}}</p></li>
                    <li><p class="_left">普直</p><p class="_right">{{onDutyProductDetail.jsP}}</p></li>
                    <li><p class="_left">单支连排</p><p class="_right">{{onDutyProductDetail.single}}</p></li>
                    <li><p class="_left">U管成型</p><p class="_right">{{onDutyProductDetail.Ushape}}</p></li>
                    <li><p class="_left">多支</p><p class="_right">{{onDutyProductDetail.double}}</p></li>
                </div>
            </div>
            <div class="part_nav part_nav_1">
                <h2 class="title"><i class="iconfont icon-touliaochuku"></i> 原辅料用量</h2>
                <div class="contain">
                    <div class="tableList">
                        <li class="th">
                            <span></span>		
                            <span>主料</span>
                            <span>辅料</span>
                            <span>色母</span>
                        </li>			
                        <li class="td td1">
                            <span class="bg">今日</span>
                            <span v-for="(item,index) in pageLinePeis.day">{{item}}</span>
                        </li>
                        <li class="td td2">
                            <span class="bg">本月</span>
							<span v-for="(item,index) in pageLinePeis.moth">{{item}}</span>
                        </li>
                        <li class="td td3">
                            <span class="bg">本年</span>
							<span v-for="(item,index) in pageLinePeis.year">{{item}}</span>
                        </li>
                    </div>
                </div>
            </div>
            <div class="clearBoth"></div>
        </div>
        <div class="main_part main_part_2">
            <div class="part_nav part_nav_4 scroll_board">
                <h2 class="title"><i class="iconfont icon-tongji-caigou-caigoutuihuozhuangtaifenxi"></i> 在产任务</h2>
                <div class="contain">
					<dv-scroll-board :config="onDutyTasks" class="zll_board zll_board_bg2" />
                </div>
            </div>
            <div class="part_nav scroll_board">
                <h2 class="title"><i class="iconfont icon-weizhang"></i> 违章公示</h2>
                <div class="contain">
					<dv-scroll-board :config="tableData" class="zll_board zll_board_bg2" />
                </div>
            </div>
        </div>
        <div class="main_part main_part_3">
            <div class="part_nav part_nav_1">
                <h2 class="title"><i class="iconfont icon-changqucangkujichuziliao"></i> 仓储任务</h2>
                <div class="contain">
                    <div class="echart" ref="echartLine1"></div>
                    <div class="echart" ref="echartLine2"></div>
                    <div class="echart" ref="echartLine3"></div>
                </div>
            </div>
            <div class="part_nav part_nav_1">
                <h2 class="title"><i class="iconfont icon-weizhang"></i> 人事与检疫</h2>
                <div class="contain">
                    <div class="echart" ref="echartLine4"></div>
                    <div class="echart" ref="echartLine5"></div>
                    <div class="echart" ref="echartLine6"></div>
                </div>
            </div>
            <div class="part_nav banben">
                <h2 class="title"><i class="iconfont iconfontc icon-banben"></i> 系统属性</h2>
                <div class="contain">
                    <p><span>系统名称：</span>{{ sysInfo.sysName }}</p>
                    <p><span>版权声明：</span>{{sysInfo.copyRight}}</p>
                    <p><span>服务商：</span>南京睿孚信息科技有限公司</p>
                    <p><span>技术支持：</span>睿孚科技 025-52288309, 18951749013</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {hasPermission} from "@/plugins/hasPermission";
import LeftMenuData from '@/components/left_menu/leftMenuData'
import {getStore} from "@/plugins/localStore";
import echartOption from './echart1'
export default {
    data() {
        return {
            dialogVisible: false,
            myTestVisible: false,
            tableData: {
                carousel: 'page',
                waitTime: 3000,
                align: ['center'],
                headerBGC: '#F2F2F2',
                oddRowBGC: '#f2f2f2',
                evenRowBGC: '#f2f2f2',
				align: ['center','center','center','center',],
                headerHeight: '42',
                rowNum: 6,			
                header: ['罚单号', '违章类型', '违章日期', '违章人', ],
				columnWidth: ['200', '200', '200', '200', ],
                data: []
            },
			onDutyTasks: {
                carousel: 'page',
                waitTime: 3000,
                align: ['center'],
                headerBGC: '#F2F2F2',
                oddRowBGC: '#f2f2f2',
                evenRowBGC: '#f2f2f2',					
				align: ['center','center','center','center','right',],
                headerHeight: '42',
                rowNum: 6,			
                header: ['生产类型', '品类', '规格', '单件万支','需求件数','已报工（件数）', ],
				columnWidth: ['200', '200', '400', '200','200','200', ],
                data: []
            },
			sysInfo:{},

			orderCountDetail:{day:[],moth:[],year:[]},
			pageLinePeis:{day:[],moth:[],year:[]},
			onDutyProductDetail:{},
        };
    },
    methods: {
        getEchartData() {
            let self = this;
            let echart1 = self.$echarts.init(self.$refs.echartLine1);
            let option1 = echartOption.option1;
            option1.title.text = '20'
            echart1.setOption(option1);

            let echart2 = self.$echarts.init(self.$refs.echartLine2);
            let option2 = echartOption.option2;
            echart2.setOption(option2);

            let echart3 = self.$echarts.init(self.$refs.echartLine3);
            let option3 = echartOption.option3;
            echart3.setOption(option3);

            let echart4 = self.$echarts.init(self.$refs.echartLine4);
            let option4 = echartOption.option4;
            echart4.setOption(option4);

            let echart5 = self.$echarts.init(self.$refs.echartLine5);
            let option5 = echartOption.option5;
            echart5.setOption(option5);

            let echart6 = self.$echarts.init(self.$refs.echartLine6);
            let option6 = echartOption.option6;
            echart6.setOption(option6);
            window.onresize = function() {
                echart1.resize()
                echart2.resize()
                echart3.resize()
                echart4.resize()
                echart5.resize()
                echart6.resize()
            }
        },

		getOrderTypeCount() {
			let self = this;
			self.orderCountDetail = {};
			self.$http({
				url: "/jinl/firstPage/getOrderTypeCount",
				method: "post",
			}).then(resp => {
				if (resp.success) {
					self.orderCountDetail = resp.result;
				}
			});
		},

		getOnDutyProductDetail() {
			let self = this;
			self.onDutyProductDetail = {};
			self.$http({
				url: "/jinl/firstPage/getOnDutyProductDetail",
				method: "post",
			}).then(resp => {
				if (resp.success) {
					self.onDutyProductDetail = resp.result;
				}
			});
		},

		getTodayOnDutyProductTask() {
			let self = this;
			self.$http({
				url: "/jinl/firstPage/getTodayOnDutyProductTask",
				method: "post",
			}).then(resp => {
				if (resp.success) {
					let allDatas = [];
					for(let data of resp.result){
						let tables = [];
						tables[0] = data.planTypeCn;
						tables[1] = data.itemTypeId;
						tables[2] = data.gradeValue;
						tables[3] = data.thNumber;
						tables[4] = data.totalNum;
						tables[5] = data.productPieceNum;
						allDatas.push(tables);
					}
					self.onDutyTasks.data = allDatas;
					self.onDutyTasks = Object.assign({},self.onDutyTasks);
				}
			});
		},

		getFirstPageLinePeis() {
			let self = this;
			self.pageLinePeis = {};
			self.$http({
				url: "/jinl/firstPage/getFirstPageLinePeis",
				method: "post",
			}).then(resp => {
				if (resp.success) {
					self.pageLinePeis = resp.result;
				}
			});
		},

		getStorageDetail() {
			let self = this;
			self.$http({
				url: "/jinl/firstPage/getStorageDetail",
				method: "post",
			}).then(resp => {
				if (resp.success) {
					let bxOut = resp.result.bxOut||0;
					let tuIn = resp.result.tuIn||0;
					let cgIn = resp.result.cgIn||0;

					let echart1 = self.$echarts.init(self.$refs.echartLine1);
					let echart2 = self.$echarts.init(self.$refs.echartLine2);
					let echart3 = self.$echarts.init(self.$refs.echartLine3);

					let option1 = echartOption.option1;
					let option2 = echartOption.option2;
					let option3 = echartOption.option3;

					option1.title.text = bxOut;
					option2.title.text = tuIn;
					option3.title.text = cgIn;

					echart1.setOption(option1);
					echart2.setOption(option2);
					echart3.setOption(option3);
				}
			});
		},


		getSysInfo() {
			let self = this;
			self.$http({
				url: "/jinl/sysInfo/getSysInfoList",
				method: "post",
				params:{notToken:true}
			}).then(resp => {
				if (resp.success) {
					self.sysInfo = resp.result;
				}
			});
		},

		//违章公示
		getWeiZhangList(){//获取表格数据
			let self = this;

			self.$http({
				url: "/jinl/violation/getApprovedList",
				method: "post",
				data: JSON.stringify({status:'1'}),
				dataType: 'json',
				contentType: 'application/json',
			}).then(resp=>{
				self.tableData.data = [];
				if (resp.success) {
					for (let data of resp.result){
						let datas = [];
						datas[0] = data.fdCode;
						datas[1] = data.fdTypeCn;
						datas[2] = data.fdDate;
						datas[3] = data.violatorName;

						self.tableData.data.push(datas);
					}
					self.tableData = JSON.parse(JSON.stringify(self.tableData));

				}
			});

		},

		//人事与检疫
		getHealthAndPersonnel(){//获取表格数据
			let self = this;

			self.$http({
				url: "/jinl/personnelManage/countPersonnelAndHealth",
				method: "post",
				dataType: 'json',
				contentType: 'application/json',
			}).then(resp=>{
				if (resp.success) {

					let yearNewPersonnel = resp.result.yearNewPersonnel;
					let monthNewPersonnel = resp.result.monthNewPersonnel;
					let healthNear = resp.result.healthNear;

					let echart4 = self.$echarts.init(self.$refs.echartLine4);
					let echart5 = self.$echarts.init(self.$refs.echartLine5);
					let echart6 = self.$echarts.init(self.$refs.echartLine6);

					let option4 = echartOption.option4;
					let option5 = echartOption.option5;
					let option6 = echartOption.option6;

					option4.title.text = yearNewPersonnel;
					option5.title.text = monthNewPersonnel;
					option6.title.text = healthNear;

					echart4.setOption(option4);
					echart5.setOption(option5);
					echart6.setOption(option6);
				}
			});

		},



    },
    mounted() {
		// this.getEchartData();
		this.getWeiZhangList();
		this.getHealthAndPersonnel();

		this.getSysInfo();
		this.getOrderTypeCount();
		this.getOnDutyProductDetail();
		this.getFirstPageLinePeis();
		this.getTodayOnDutyProductTask();
		this.getStorageDetail();

    },
    components: {
     
    },
};
</script>
<style scoped lang="scss">
@font-face {
    font-family: 'fonta';  //重命名字体名
    src: url('../../assets/fontFamily.ttf');  //引入字体
}
.FirstPage {
    height:100%;
    background: #f2f2f2;
    .main_part {
        height: 250px;
        margin-bottom: 15px;
        &.main_part_3 {
            .part_nav_1 {
                .contain {
                    display: flex;padding: 10px;
                    .echart {
                        width: 33.3333%;
                        height: 180px;
                    }
                }
            }
        }
        &.main_part_2 {
            height: 350px;
            .part_nav_4 {
                width: calc(66.666% - 5px);
            }
            .scroll_board {
                .contain {
                    .zll_board {
                        height: 300px;
                    }
                }
            }
        }
        &.main_part_1 {
            .part_nav_2 {
                .contain {
                    display: flex;    flex-wrap: wrap;
                    li {
                        width: calc(50% - 40px);
                        display: flex;
                        border: 1px solid #00BCD4;
                        line-height: 30px;
                        margin:8px 20px;text-align: center;
                        ._left {
                            width: 40%;background: #00BCD4;color: #fff;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        ._right {
                            width: 60%;letter-spacing: 4px;
                            span {
                                color: #00BCD4;    
                            }
                        }
                    }
                }
            }
            .part_nav_1 {
                .tableList {
                    position: relative;
                    padding: 0 20px;
                    li {
                        height: 38px;
                        line-height: 38px;
                        display: flex;
                        span {
                            width: 25%;
                            text-align: center;
                        }
                        &.th {
                            color: #6e6e6e;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        &.td {
                            border: 1px solid #00D1D0;
                            margin-bottom: 15px;
                            font-size: 14px;
                            .bg {
                                color: #fff;
                            }
                            &.td1 {
                                border-color: #1890ff;
                                .bg {
                                    background: #1890ff;
                                }
                            }
                            &.td2 {
                                border-color: #4caf50;
                                .bg {
                                    background: #4caf50;
                                }
                            }
                            &.td3 {
                                border-color: #ffc107;
                                .bg {
                                    background: #ffc107;
                                }
                            }
                        }
                    }
                }
            }
        }
        .part_nav {
            width: calc(33.3333% - 10px);
            height: 100%;
            float: left;
            border: 1px solid #8fc4c7;
            background: #fff;
            margin-left: 15px;
            &:nth-child(1) {
                margin-left: 0;
            }
            &.banben {
                background-color: #f2f6fc;
                border-radius: 15px;
                .contain {
                    padding: 20px 15px 0px 15px;
                    height: calc(100% - 40px);
                    font-size: 14px;
                    line-height: 28px;
                    align-items: center;
                    text-align: left;
                    p {
                        line-height: 35px;
                    }
                    span {
                        width: 80px;
                        display: inline-block;
                        margin-left: 21px;
                        color: #8d9498;
                    } 
                }
            }
            .title {
                font-size: 12px;
                height: 40px;
                line-height: 36px;
                padding: 0 15px;
                display: flex;
                align-items: center;
                color: #9e9e9e;
                .iconfont {
                    font-size: 18px;
                    font-weight: 400;
                    color: #00D1D0;
                    margin-right: 5px;
                }
            }
        }
    }
}
</style>
